<template>
  <div class="app-container app-container-next app-container-detail">
    <div slot="header" class="back">
      <router-link :to="{name: 'tools-list'}">
        <el-button plain icon="el-icon-back" size="small" :round="true">
          返回
        </el-button>
      </router-link>
    </div>
    <div class="container">
      <div class="container-content">
        <svg-icon icon-class="ads" style="font-size: 100px;height: 80px"></svg-icon>
        <div class="content">
          <div class="container_top">
            <span class="container_title" style="display: flex;align-items: center">Google Feed 验证网站 <el-button size="mini" @click="handleDown" type="primary" style="margin-left: 12px" :loading="downLoading">{{downLoading ? '下载中': '数据下载'}}</el-button></span>
          </div>
          <div style="color:#7e849c;font-size:14px">验证您商店的网站并声明所有权，设置 Merchant Center 账号，通过网站自动添加商品Feed。 </div>
        </div>
      </div>
    </div>
    <el-card class="box-card site" shadow="false">
      <el-row style="margin-top: 20px">
        <el-col :span="24">
          <el-form ref="settingForm" :model="settings" label-width="800px" label-position="top">
            <el-form-item label="粘贴HTML标记：" prop="name">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6}"
                  placeholder="请输入代码"
                  v-model="settings.sourceFeedId"
                  style="width:800px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit" :loading="submitLoading">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';
import {addGoogleAds, googleAds, exportFeed} from '@/api/app-market';
import { getToken } from '@/utils/auth';
import {mapGetters} from 'vuex';

export default {
    name: 'fb-domain',
    data () {
        return {
            downLoading: false,
            submitLoading: false,
            settings: {
                id: '',
                sourceFeedId: '',
                content: ''
            }
        };
    },
    methods: {
        googleAds () {
            googleAds(this.siteId).then((res) => {
                if (res.data) {
                    this.settings = res.data;
                }
            });
        },
        downloadURL (data) {
            const blob = new Blob([data], { type: 'application/vnd.ms-excel' });
            console.log(blob);
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = this.siteId + '-feed' + '-' + new Date().getTime().toString() + (Math.random().toFixed(2) * 400 + 100).toString() + '.xlsx';
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
        },
        handleDown () {
            this.downLoading = true;
            axios({
                method: 'get',
                url: this.uploadPath,
                headers: {
                    'X-TULIANG-Session-Token': getToken()
                },
                responseType: 'arraybuffer'
            }).then(res => {
                this.downloadURL(res.data);
                this.downLoading = false;
            });
        },
        handleSubmit () {
            this.submitLoading = true;
            this.settings.siteId = this.siteId;
            let bindValue = this.settings.sourceFeedId.match(/(?<=content=").*?(?=")/);
            console.log(bindValue);
            this.settings.feedId = (bindValue && bindValue[0]) || '';
            addGoogleAds(this.settings).then(res => {
                if (res.code === '200') {
                    this.submitLoading = false;
                    this.$message.success('保存成功');
                    this.$store.dispatch('CLEAR_FRONT_CACHE');
                    this.$router.push({name: 'tools-list'});
                }
            }).catch(() => {
                this.submitLoading = false;
            });
        }
    },
    mounted () {
        this.googleAds();
    },
    computed: {
        ...mapGetters(['siteList']),
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        },
        siteId () {
            return this.$store.state.user.siteId;
        },
        uploadPath () {
            return `${process.env.VUE_APP_BASE_API}/google-config/${this.siteId}/export-feed`;
        }
    }
};
</script>

<style scoped lang="scss">
.no-down {
  ::v-deep .el-input__suffix {
    display: none;
  }

  ::v-deep .el-select-dropdown {
    display: none;
  }
}
.container {
 padding: 0;
  display: flex;
  justify-content: space-between;
}

.back {
  margin: 20px;
}

.container-content {
  display: flex;
  flex-direction: row;
}

.container-content img {
  height: 80px;
}

.container_top {
  margin-bottom: 10px;
}

.content {
  display: flex;
  flex-direction: column;
  line-height: 30px;
  margin-left: 20px;
}

.container_title {
  font-size: 22px;
  color: #30344f;
  font-weight: 500;
}
</style>
